<template>
<div class="auto-paly">
  <Header></Header>
  <div class="main">
      <div class="nav">
        <ul>
          <li>
            <a href="#d1">技术社区</a>
          </li>
          <li>
            <a href="#d2">常用框架and库</a>
          </li>
          <li>
            <a href="#d3">学习专区</a>
          </li>
          <li>
            <a href="#d4">资源素材</a>
          </li>
        </ul>
      </div>
    <div class="container">
      <div class="top">
        <h4 id="d1">技术社区</h4>
      </div>
      <div class="list">
        <a href="https://www.csdn.net/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="../../../public/image/csdn.png" alt="">
            </div>
            <div class="content">
              <h3 class="title">CSDN</h3>
              <p class="intro">最大的中文技术社区</p>
            </div>
          </div>
        </a>

        <a href="https://www.oschina.net/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="https://shop-1256119282.file.myqcloud.com/tooools/static/img/index/tech/oschina-ef1595b488.ico"
                   alt="">
            </div>
            <div class="content">
              <h3 class="title">开源中国</h3>
              <p class="intro">国内最大技术交流社区</p>
            </div>
          </div>
        </a>

        <a href="https://segmentfault.com/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="https://shop-1256119282.file.myqcloud.com/tooools/static/img/index/tech/sf-55dc8b2afe.ico"
                   alt="">
            </div>
            <div class="content">
              <h3 class="title">思否</h3>
              <p class="intro">中国领先开发者社区</p>
            </div>
          </div>
        </a>

        <a href="https://juejin.cn/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="	https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
                   alt="">
            </div>
            <div class="content">
              <h3 class="title">稀土掘金</h3>
              <p class="intro">代码不止,掘金不停</p>
            </div>
          </div>
        </a>

        <a href="https://www.cnblogs.com/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="https://www.cnblogs.com/images/logo.svg?v=R9M0WmLAIPVydmdzE2keuvnjl-bPR7_35oHqtiBzGsM"
                   alt="">
            </div>
            <div class="content">
              <h3 class="title">博客园</h3>
              <p class="intro">开发者的网上家园</p>
            </div>
          </div>
        </a>

        <a href="https://stackoverflow.com/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="https://shop-1256119282.file.myqcloud.com/tooools/static/img/index/tech/stackoverflow-a52f4db438.svg"
                   alt="">
            </div>
            <div class="content">
              <h3 class="title">Stackoverflow</h3>
              <p class="intro">解决全球99%的BUG</p>
            </div>
          </div>
        </a>

        <a href="https://gitee.com/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="../../../public/image/logo.svg" alt="">
            </div>
            <div class="content">
              <h3 class="title">Gitee码云</h3>
              <p class="intro">中国开源代码共享社区</p>
            </div>
          </div>
        </a>

        <a href="https://github.com/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="https://shop-1256119282.file.myqcloud.com/tooools/static/img/index/study/github-2c2870f30b.svg"
                   alt="">
            </div>
            <div class="content">
              <h3 class="title">GitHub</h3>
              <p class="intro">全球开源代码共享社区</p>
            </div>
          </div>
        </a>

        <a href="https://zhihu.com/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="https://shop-1256119282.file.myqcloud.com/tooools/static/img/index/study/zhihu-ca1078b5f5.png"
                   alt="">
            </div>
            <div class="content">
              <h3 class="title">知乎</h3>
              <p class="intro">有问题,就会有答案</p>
            </div>
          </div>
        </a>

        <!-- 解决底部不够三个布局异常问题 -->
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>

    <div class="container">
      <div class="top">
        <h4 id="d2">常用框架和库</h4>
      </div>
      <div class="list">
        <a href="https://www.npmjs.com/">
          <div class="item">
            <div class="icons">
              <img src="https://s.cn.bing.net/th?id=ODLSF.4983b4a2-f7e6-47d1-a8cb-212043d62dbf&w=16&h=16&o=6&pid=1.2" alt="">
            </div>
            <div class="content">
              <h3 class="title">npmjs</h3>
              <p class="intro">The company behind Node package manager</p>
            </div>
          </div>
        </a>
        <a href="https://cn.vuejs.org/v2/guide/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="https://cn.vuejs.org/images/logo.svg" alt="">
            </div>
            <div class="content">
              <h3 class="title">Vue.js 2.X</h3>
              <p class="intro">用于构建用户界面的渐进式js框架</p>
            </div>
          </div>
        </a>

        <a href="https://element.eleme.cn/#/zh-CN" target="_blank">
          <div class="item">
            <div class="icons">
              <img src=""
                   alt="">
            </div>
            <div class="content">
              <h3 class="title">ElementUI</h3>
              <p class="intro">基于 Vue 2.0 的桌面端组件库</p>
            </div>
          </div>
        </a>

        <a href="https://www.nuxtjs.cn/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="https://www.nuxtjs.cn/NUXTJS-logo-800.png" alt="">
            </div>
            <div class="content">
              <h3 class="title">Nuxt.js</h3>
              <p class="intro">一个基于 Vue.js 的服务端渲染应用框架</p>
            </div>
          </div>
        </a>

        <a href="https://zh-hans.reactjs.org/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src=""
                   alt="">
            </div>
            <div class="content">
              <h3 class="title">React</h3>
              <p class="intro">一个用于构建用户界面的 JavaScript 库</p>
            </div>
          </div>
        </a>

        <a href="http://www.axios-js.com/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="	http://www.axios-js.com/logo.svg" alt="">
            </div>
            <div class="content">
              <h3 class="title">Axios</h3>
              <p class="intro">易用、简介且高效的Http库</p>
            </div>
          </div>
        </a>

        <a href="https://mongodb.net.cn/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="https://mongodb.net.cn/Application/Home/View/Public/img/mongodb-logo.png" alt="">
            </div>
            <div class="content">
              <h3 class="title">MonogDB</h3>
              <p class="intro">基于分布式文件存储的数据库</p>
            </div>
          </div>
        </a>


        <!-- 解决底部不够三个布局异常问题 -->
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>

    <div class="container">
      <div class="top">
        <h4 id="d3">学习专区</h4>
      </div>
      <div class="list">
        <a href="https://www.runoob.com/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="https://www.runoob.com/wp-content/themes/runoob/assets/img/runoob-logo.png"
                   alt="">
            </div>
            <div class="content">
              <h3 class="title">菜鸟教程</h3>
              <p class="intro">学的不仅是技术，更是梦想！</p>
            </div>
          </div>
        </a>

        <a href="https://www.runoob.com/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="https://shop-1256119282.file.myqcloud.com/tooools/static/img/index/media/bili-f2d2896c48.ico"
                   alt="">
            </div>
            <div class="content">
              <h3 class="title">B站</h3>
              <p class="intro">国内知名视频弹幕网站,在线观看学习视频</p>
            </div>
          </div>
        </a>


        <!-- 解决底部不够三个布局异常问题 -->
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>

    <div class="container">
      <div class="top">
        <h4 id="d4">资源素材</h4>
      </div>
      <div class="list">
        <a href="https://undraw.co/illustrations" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="https://undraw.co/favicon.ico" alt="">
            </div>
            <div class="content">
              <h3 class="title">unDraw</h3>
              <p class="intro">免费可商用插画资源网站</p>
            </div>
          </div>
        </a>
        <a href="https://illustrationkit.com/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="https://d33wubrfki0l68.cloudfront.net/24e2a4bbea04507012032876d1a12709db936e1f/57283/logo.svg"
                   alt="">
            </div>
            <div class="content">
              <h3 class="title">illustrationkit</h3>
              <p class="intro">Free vector illustrations</p>
            </div>
          </div>
        </a>
        <a href="http://zhongguose.com/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="http://zhongguose.com/img/favicon.ico" alt="">
            </div>
            <div class="content">
              <h3 class="title">中国色</h3>
              <p class="intro">传统中国颜色</p>
            </div>
          </div>
        </a>

        <a href="https://www.iconfont.cn/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"
                   alt="">
            </div>
            <div class="content">
              <h3 class="title">iconfont</h3>
              <p class="intro">强大且图标内容很丰富的矢量图标库</p>
            </div>
          </div>
        </a>

        <a href="https://ziyouziti.com/" target="_blank">
          <div class="item">
            <div class="icons">
              <img src="https://ziyouziti.com/assets/images/logo-top@2x.png" alt="">
            </div>
            <div class="content">
              <h3 class="title">自由字体</h3>
              <p class="intro">国内权威的免费字体网站</p>
            </div>
          </div>
        </a>
        <!-- 解决底部不够三个布局异常问题 -->
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
  </div>
  <Footer></Footer>
</div>
</template>

<script>
import Header from "../../components/Header";
import Footer from "../../components/Footer";
export default {
  name: "navPage",
  components: {
    Header,
    Footer,
  },
}
</script>

<style scoped>
/* 中部内容样式 */
.main {
  width: 100%;
}

.main .container {
  max-width: 1000px;
  margin: 20px auto;
  background-color: white;
  box-shadow: 0 2px 3px rgb(35 51 64 / 15%);
}

.main .container .top {
  border-bottom: 2px solid #f1f4f9;
}

h3, h4{
  margin: 0;
  padding: 10px;
}
.main .container .list {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
  justify-content: space-around;
}

.main .container .list .item {
  display: flex;
  padding: 10px 0;
  transition: all .4s linear;
  width: 300px;
}

.main .container .list .item:hover {
  cursor: url(""), pointer;
  background-color: #F2F8FD;
}

.main .container .list .item img {
  width: 100px;
  height: 50px;
}

.main .container .list .item .content {
  padding: 0 5px;
}

.main .container .list .item .content .intro {
  color: #a2a2a2;
}

/* 导航栏样式 */
.nav{
  max-width: 1000px;
  margin: 0 auto;
  background-color: white;
  height: 50px;
  line-height: 50px;
}
.nav ul,
li {
  list-style: none;
}

.nav ul {
  display: flex;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  width: 100%;
}

.nav ul li a:hover {
  cursor: url(""), pointer;
  color: #42b983;
}

</style>
